<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p, ul, li { padding: 0; margin: 0; list-style: none; }
#box { font-size: 12px; color: #00c; width: 58px; margin: 0 auto; }
p { width: 55px; height: 24px; line-height: 24px; padding-left: 3px; background: url(ico.gif) no-repeat right 4px; }
ul { width: 56px; border: 1px solid #9a99ff; display: none; }
a { text-decoration: none; display: block; height: 24px; line-height: 24px; text-align: center; color: #00c; }
a:hover { background: #d9e1f6; }
</style>
<script type="text/javascript">
	window.onload=function(){
		var oBtn=document.getElementById("btn");
		var oUl=document.getElementById("ul1");
		oBtn.onclick=function(){
			if(oUl.style.display=="block"){
				oUl.style.display="none";
			}else{
				oUl.style.display="block";	
			}
		}	
	}
</script>
</head>

<body>

<div id="box">
	<p id="btn">输入法</p>
	<ul id="ul1" style="display:none;">
		<li><a href="#">手写</a></li>
		<li><a href="#">拼音</a></li>
		<li><a href="#">关闭</a></li>
	</ul>
</div>


</body>
</html>